<template>
  <div id="info">
    <divider>我的订单</divider>
    <div>
       <tab :line-width=2 active-color='#10c5b6' v-model="index">
        <tab-item class="vux-center" :selected="demo2 === item" v-for="(item, index) in list2" @click="demo2 = item" :key="index">{{item}}</tab-item>
      </tab>
      <div style="padding:5px">
        <div v-if="index==0">
            <x-table :cell-bordered="false" style="background-color:#fff;">
                <thead>
                <tr>
                    <th>商品名称</th>
                    <th>价格</th>
                    <th>数量</th>
                    <th>商户</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>Apple</td>
                    <td>$1.25</td>
                    <td> x 1</td>
                    <td>水果店</td>
                </tr>
                <tr>
                    <td>Banana</td>
                    <td>$1.20</td>
                    <td> x 2</td>
                    <td>水果店</td>
                </tr>
                </tbody>
            </x-table>
        </div>
        <div v-if="index==1">
            待付款
        </div>
        <div v-if="index==2">
            已完成订单
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Divider, Tab, TabItem, XTable, LoadMore } from 'vux'
import { getAuthInfo } from '../utils/common'
const list = () => ['全部', '代付款', '已完成']

export default {
  components: {
    Tab,
    Divider,
    TabItem,
    XTable,
    LoadMore
  },
  data () {
    return {
      list2: list(),
      index: 0
    }
  },
  created: function () {
    getAuthInfo('home')
  }
}
</script>

<style lang="less" scoped>
@import '~vux/src/styles/1px.less';
@import '~vux/src/styles/center.less';

.box {
  padding: 15px;
}
.active-6-1 {
  color: rgb(252, 55, 140) !important;
  border-color: rgb(252, 55, 140) !important;
}
.active-6-2 {
  color: #04be02 !important;
  border-color: #04be02 !important;
}
.active-6-3 {
  color: rgb(55, 174, 252) !important;
  border-color: rgb(55, 174, 252) !important;
}
.tab-swiper {
  background-color: #fff;
  height: 100px;
}

</style>
